import { Form, Popup, SearchBar, Toast } from 'antd-mobile'
import { useEffect, useState } from 'react'
import style from './index.module.less'
import { RightOutline } from 'antd-mobile-icons'
import classNames from 'classnames'
import { getPersonListRequest, getPersonDataRequest } from './ajax'
import { awaitWrap } from '@src/assets/js/tool'
import { debounce } from 'lodash'
import Loading from '@src/components/listLoading'
import PageEmpty from '@components/pageEmpty'

const { Item } = Form

async function initList (name, setData, setLoading) {
  if (!name) {
    setData([])
    return undefined
  }
  setLoading(true)
  const [e, d] = await awaitWrap(getPersonListRequest(name))
  setLoading(false)
  if (e === null && d !== null) {
    setData(d)
  }
}

async function getOneData (name, callback) {
  Toast.show({ content: '加载中', icon: 'loading', duration: 0 })
  const [e, d] = await awaitWrap(getPersonDataRequest(name))
  if (e === null) {
    Toast.clear()
    if (d) {
      callback(d)
    }
  }
}

const initList_ = debounce(initList, 1000)

function Name ({ value }) {
  return (
    <span>{value}</span>
  )
}

function Line ({ data, name, formRef, setVisible }) {
  const [active, setActive] = useState(false)
  return (
    <div className={classNames(style.item, {[style.active]: active})} onClick={() => {
      setActive(true)
      getOneData(data.name, (d) => {
        formRef.setFieldsValue({
          [name]: d.name,
          license: d.license,
          license_type: d.license_type ? [d.license_type] : [],
          mobile: d.mobile ? d.mobile : '',
          email: d.email ? d.email : '',
          address: d.address ? d.address : '',
          legal: d.legal ? d.legal : '',
          contact: d.contact ? d.contact : ''
        })
      })
      setTimeout(() => {
        setActive(false)
        setVisible(false)
      }, 150)
    }}>
      <div className={style['item-inner']}>
        <div className={style['item-name']}>{data.name}</div>
        <div className={style['item-num']}>{data.license}</div>
      </div>
      <div className={style['item-arrow']}>
        <RightOutline />
      </div>
    </div>
  )
}

function Main ({ label, name, rules, formRef }) {
  const [visible, setVisible] = useState(false)
  const [text, setText] = useState('')
  const [loading, setLoading] = useState(false)
  const [list, setList] = useState([])
  useEffect(() => {
    if (text) {
      initList_(text, setList, setLoading)
    } else {
      setList([])
    }
  }, [text])
  useEffect(() => {
    if (!visible) {
      setText('')
        setList([])
    }
  }, [visible])

  return (
    <>
      <Item
        name={name}
        label={label}
        rules={rules}
        onClick={() => {
          setVisible(true)
        }}
      >
        <Name />
      </Item>
      <Popup
        visible={visible}
        position='right'
        bodyStyle={{ width: '100vw' }}
        onMaskClick={() => {
          setVisible(false)
        }}
      >
        <div className={style.container}>
          <div className={style.header}>
            <a className={style.back} onClick={() => {
              setVisible(false)
            }}>取消</a>
            <a className={style.back} onClick={() => {
              formRef.setFieldValue(name, text)
              setVisible(false)
            }}>确定</a>
          </div>
          <div className={style.search}>
            <SearchBar
              value={text}
              placeholder='请输入企业名称'
              onChange={(v) => {
                setText(v)
              }}
            />
          </div>
          <div className={style.body}>
            <div className={style.inner}>
              {
                loading && <Loading />
              }
              {
                !loading && list.length > 0 && (
                  list.map((li, i) => {
                    return (
                      <Line key={i} data={li} formRef={formRef} name={name} setVisible={setVisible} />
                    )
                  })
                )
              }
              {
                !loading && list.length === 0 && (
                  <PageEmpty />
                )
              }
            </div>
          </div>
        </div>
      </Popup>
    </>
  )
}

export default Main
